<template>
	<div class="wiki">
		<div class="wiki-top clearfix">
			<div class="left circle-wrap">
				<x-circle
		        :percent="parseInt(diagnosisGlobal.diagnoses[idx].weight*100)"
		        :stroke-width="8"
		        stroke-color="#1CB9B5">
		        <span>{{idx+1}}</span>
		      </x-circle>
			</div>
			<div class="left" style="width:90%;">
				<p class="wiki-top-title text-left">{{diagnosisGlobal.diagnoses[idx].text}}</p>
				<p class="clearfix wiki-top-department-wrap">
					<span class="left wiki-top-department">
						<img src="../assets/img/coordinate.svg" alt="img" class="coordinate"/>
						{{diagnosisGlobal.diagnoses[idx].department.name}}
					</span>
					
				</p>
				<div class="wiki-top-distinguish">
					<p class="text-left">判别原因:</p>
					<p class="text-left">您描述的
						<span v-for="(item,index) in diagnosisGlobal.diagnoses[idx].typicalSymptoms">
							{{item.name}}
							<span v-if="index!=diagnosisGlobal.diagnoses[idx].typicalSymptoms.length-1">,</span>
						</span>						
						都属于<strong>{{diagnosisGlobal.diagnoses[idx].text}}</strong>的典型症状。</p>
				</div>
				
			</div>
		</div>
		<div class="wiki-con">
			<p class="wiki-con-title text-left">
				<img src="../assets/img/wiki-icon.svg" alt="img" style="width:.4rem;height:.4rem;margin-top:-.14rem;"/>
				疾病wiki
			</p>
			<div v-for="(item,index) in wiki" :key="index" class="wiki-list">
	            <div class="wiki-list-title" @click="clickWikiTitle(index)">
		              <div class="clearfix">
		              	  <p class="text-left left">{{item.title}}</p>
			              <p class="icon right">
			                <img src="../assets/img/down-icon.svg" alt="img" :class="[item.show?'up-icon':'']" class="down-icon"/>
			              </p>
		              </div>
		              <p :style="{height:item.show?'auto':'0'}" class="text-left wiki-text">
		              	{{item.text}}
		            </p>
	            </div>
	            
	        </div>
		</div>	     
	</div>
</template>

<script>
	import {XCircle} from 'vux'
	import {urlWiki} from '../api/api'
	import {mapState} from 'vuex'
	export default {
        name: 'wiki',
        data(){
            return{
            		relHeight:'', 
            		percent: 50,
            		wiki:[],
            		idx:0
            }
        },  
        components: {
		    XCircle
		},
        computed: {
            ...mapState(['diagnosisGlobal','distinguishGlobal'])
        },
        created(){
        		//获取页面高度
	    		this.$nextTick(() => {
				this.relHeight=document.documentElement.clientHeight+'px'
          	}) 
        },
        mounted(){
        		console.log(this.diagnosisGlobal,'diagnosisGlobal');
	    		this.getWikiListFn();
	    		this.idx=this.$route.params.index;
	    	},
        methods:{
        		//点击显示更多详情
	        	clickWikiTitle(idx){
	        		let _wiki = JSON.parse(JSON.stringify(this.wiki));
		        _wiki[idx].show = !_wiki[idx].show;
		        this.wiki= _wiki;
	        	},
	        	//wiki请求
		    getWikiListFn(){
		    		let sendData={
		    			id:this.$route.params.id
		    		};
		    		urlWiki(sendData).then(response => {
					if(response.data.items){
						this.wiki=response.data.items;
					}
				}).catch(error => {
	           	    console.log(34)
	          	});
		    },
        },
		
    }
</script>

<style>
	@import url("../assets/css/wiki.css");
</style>